<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>人脸注册</h1>
    <div id="face-box">
        <video id="video"></video>
        <canvas id="canvas" style="display: none;"></canvas>
    </div>

<button id="button">开启摄像头</button>
    <button id="go">不需要，直接登录</button>
</body>

<script>
    //成功回调函数
    let video = document.getElementById("video");
    let canvas = document.getElementById("canvas");
    let context = canvas.getContext("2d");
    let mediaStreamTrack=null;
    function success(stream){
        //兼容webkit核心浏览器
        // let CompatibleURL = window.URL || window.webkitURL;
        //将视频流转化为video的源
        mediaStreamTrack=stream;
        try {
            // video.src = CompatibleURL.createObjectURL(stream);
            video.srcObject=stream;
        }catch (e) {
            console.log("访问用户媒体设备失败：",error.name,error.message);
        }

        video.play();//播放视频

        //将视频绘制到canvas上
    }
    //错误回调函数
    function error(error) {
        console.log('访问用户媒体失败：',error.name,error.message);
    }
    function getUserMediaToPhoto(constraints,success,error) {
        if(navigator.mediaDevices.getUserMedia){
            //最新标准API
            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
        }else if (navigator.webkitGetUserMedia) {
            //webkit核心浏览器
            navigator.webkitGetUserMedia(constraints,success,error);
        }else if(navigator.mozGetUserMedia){
            //firefox浏览器
            navigator.mozGetUserMedia(constraints,success,error);
        }else if(navigator.getUserMedia){
            //旧版API
            navigator.getUserMedia(constraints,success,error);
        }
    }

    function getFace() {
        context.drawImage(video,0,0,300,150);
        this.img=canvas.toDataURL('image/jpg')
        //获取完整的base64编码
        this.img=img.split(',')[1];
        return this.img;
    }
    function openUserMedia() {
        if(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia){
            getUserMediaToPhoto({video:{width:480,height:320,facingMode: "user"}},success,error);
        }else{
            alert('你的浏览器不支持访问用户媒体设备');
        }
    }
    function  offUserMedia() {
        if(mediaStreamTrack!=null)
            mediaStreamTrack.getTracks()[0].stop();
    }
</script>
<script src="js/jquery-3.2.1.js"></script>
<script>
    $(function () {
        $("body").on('click','#button',function () {
            if(mediaStreamTrack==null){
                openUserMedia();
                Facelogin("../face/register");
            }else{
                offUserMedia();
            }
        })


        $("body").on('click','#go',function () {
           location.href="./login.html";
        })

    })

</script>

<script>
    let burl = "";
    function Facelogin(url) {
        if(burl != url){
            burl = url;
        }
        setTimeout(function () {
            img = getFace();
            $.ajax({
                type:"post",
                url:url,
                data:{
                    "imgBase64":img,
                    userPhone:userPhone
                },
                success:function (data) {
                    if(data == true){
                        alert("成功");
                        location.href = "./login.html";
                    }
                    else{
                        Facelogin(burl);
                    }
                },
                error:function () {
                    alert("连接服务器失败")
                },
                async:true
            })
        },2000);
    }
    let userPhone = getUrlParams("userPhone");
    function getUrlParams(key) {
        var url = window.location.search.substr(1);
        if (url == '') {
            return false;
        }
        var paramsArr = url.split('&');
        for (var i = 0; i < paramsArr.length; i++) {
            var combina = paramsArr[i].split("=");
            if (combina[0] == key) {
                return combina[1];
            }
        }
        return false;
    }
</script>
</html>